import React from 'react'
import {
  Button,
  Typography,
  Tooltip,
  Spin,
  Alert,
  Layout,
  Divider,
  Icon,
  Input,
  Row,
  Col,
  Tag,
  List,
} from 'antd'
import { withI18n, Trans } from '@lingui/react'
import { connect } from 'dva'
import { Page } from 'components'
import { stringify } from 'qs'
import Filter from './component/Filter'
import { router } from 'utils'
import { UserLink, ProjectLink, DeviceLink } from 'components'
import moment from 'moment'

const { Sider, Content } = Layout
const { Paragraph, Title } = Typography

@withI18n()
@connect(({ msgs, app, loading }) => ({ msgs, app, loading }))
class Msgs extends React.Component {
  componentWillUnmount() {
    const { dispatch } = this.props
    dispatch({ type: 'msgs/clearstore' })
  }

  render() {
    const { location, i18n, msgs, app, loading, dispatch } = this.props
    const { isMobile } = app
    const { index, data, cached } = msgs
    const { query, pathname } = location

    // console.log("cached:" + JSON.stringify(cached))

    const isloading =
      loading.effects[`msgs/query`] || loading.effects[`msgs/fetchdetail`]
    const refresh = newQuery => {
      router.push({
        pathname,
        search: stringify(
          {
            ...query,
            ...newQuery,
          },
          { arrayFormat: 'repeat' }
        ),
      })
    }

    const Filterprops = {
      isMobile,
      index,
      onFilterChange: index => {
        refresh({ index })
      },
    }
    const CheckIsCached = page => {
      // TODO 截取后分析每一个是否在内存中
      dispatch({
        type: 'msgs/fetchdetail',
        payload: {
          page, //params: JSON.stringify(needfetch)
          data,
        },
      })
    }
    return (
      <Page inner>
        <Content>
          <Layout style={{ padding: '0px 0', background: '#fff' }}>
            <Filter {...Filterprops} />
            <Content style={{ padding: '0 0px' }}>
              <Button>
                <Trans>All messages read</Trans>
              </Button>
              <List
                itemLayout="vertical"
                size={'small'}
                loading={isloading}
                dataSource={data}
                pagination={{
                  onChange: page => {
                    CheckIsCached(page)
                  },
                  pageSize: 10,
                }}
                renderItem={item => {
                  const { msg, time } = item
                  const pharse = (
                    <span
                      style={{
                        display: 'block',
                        marginLeft: '10px',
                        marginTop: '5px',
                      }}
                    >
                      {msg.Params && msg.Params.map(item => {
                        const { type, words, params } = item
                        let itemcache = {}
                        if (params && type !== 'Words') {
                          itemcache = cached[type][params.objectId]
                        }
                        const typefilter = {
                          User: (
                            <UserLink
                              style={{ display: 'inline-block' }}
                              data={itemcache ? itemcache.params : {}} //item.params
                            />
                          ),
                          Project: (
                            <ProjectLink
                              style={{ display: 'inline-block' }}
                              data={itemcache ? itemcache.params : {}}
                            />
                          ),
                          Device: (
                            <DeviceLink
                              location={location}
                              style={{ display: 'inline-block' }}
                              data={itemcache ? itemcache.params : {}}
                            />
                          ),
                          Words: (
                            <span style={{ display: 'inline-block' }}>
                              {words}
                            </span>
                          ),
                        }
                        return typefilter[type]
                      })}
                    </span>
                  )
                  return (
                    <List.Item key={time}>
                      <List.Item.Meta
                        title={pharse}
                        description={
                          <span style={{ marginLeft: '20px' }}>
                            <Icon type="dashboard" theme="twoTone" />
                            &nbsp;&nbsp;
                            {moment(time).format('YYYY-MM-DD HH:mm:ss.SSS')}
                          </span>
                        }
                      />
                    </List.Item>
                  )
                }}
              />
            </Content>
          </Layout>
        </Content>
      </Page>
    )
  }
}

export default Msgs
